<template>
  <div class="model">
    <div class="myVideo">
      <video
        id="videoPlayer"
        class="video-js vjs-default-skin"
        controls
        playsinline
        autoplay="autoplay"
        width="500px"
      >
        <source
          :src="play_url"
          type="application/x-mpegURL"
        >
      </video>

      <div class="video_top">
        <p class="text">{{ `${playInfo.title}` }} {{ isTitle ? `- 第${playInfo.chapter_num}集` : '' }}</p>
        <div
          class="close"
          @click="onClose"
        >
          <i
            class="el-icon-close"
            style="color: #fff"
          ></i>
        </div>
      </div>
      <div class="nextVideo rowFlex spaceBetween columnCenter">
        <el-select
          v-model="speed"
          placeholder="请选择"
          class="speed_select"
          size="mini"
          :clearable="false"
          @change="onSpeedChange"
        >
          <el-option
            v-for="item in speedList"
            :key="item"
            :label="'x '+item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-button
          class="btn"
          @click="nextVideo(1)"
        >上一集</el-button>
        <el-button
          class="btn"
          @click="nextVideo(2)"
        >下一集</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { POST_sys_playlet_Play } from '@/api/appContent/theater'
import SvgIcon from '@/components/SvgIcon/index.vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
  components: {
    SvgIcon
  },
  props: {
    playInfo: {
      type: Object,
      default: {}
    },
    tableData: {
      type: Array,
      default: []
    },
    isTitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      play_url: '',
      dp: null,
      speedList: [1, 1.25, 1.5, 2],
      speed: 3,
      options: {
        autoplay: false, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
        preload: 'auto', // 预加载
        controls: true // 显示播放的控件,
      }
    }
  },
  mounted() {
    this.speed = window.localStorage.getItem('video_speed') ? window.localStorage.getItem('video_speed') * 1 : 1
    this.getPlayUrl()
  },
  methods: {
    async getPlayUrl() {
      console.log(this.playInfo)
      const res = await POST_sys_playlet_Play({
        chapter_id: this.playInfo.id || ''
      })
      if (res.status_code === 1) {
        console.log(res.data.play_url)
        this.play_url = res.data.play_url
        this.$nextTick(() => {
          this.loadVideo()
        })
      }
    },
    // type 1 上一集 2 下一集
    nextVideo(type) {
      const index = this.tableData.findIndex((item) => item.id === this.playInfo.id)
      console.log(index)
      if (this.tableData.length === 1) {
        type === 1 ? this.$message.warning('没有上一集了') : this.$message.warning('没有下一集了')
        return
      }
      if (index === 0 && type === 1) {
        this.$message.warning('没有上一集了')
        return
      }
      if (index === this.tableData.length - 1 && type === 2) {
        this.$message.warning('没有下一集了')
        return
      }
      this.$emit('update:playInfo', this.tableData[type === 1 ? index - 1 : index + 1])
      console.log(this.playInfo, '123132')
      setTimeout(() => {
        this.getPlayUrl()
        this.$forceUpdate()
      }, 200)
    },
    onClose() {
      this.dp.dispose()
      this.$emit('close')
    },
    onSpeedChange() {
      this.dp.playbackRate(this.speed)
      window.localStorage.setItem('video_speed', this.speed)
    },
    loadVideo() {
      this.dp = videojs('videoPlayer', this.options)
      this.dp.src(this.play_url)
      setTimeout(() => {
        this.dp.playbackRate(this.speed)
      }, 200)
      // 也可以使用以下方式给vedio设置 src
      // this.db.src([
      //   {
      //     src: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 地址
      //     type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
      //   },
      // ]);
    },
    // 销毁
    beforeDestroy() {
      if (this.dp) {
        this.dp.dispose() // dispose()会直接删除Dom元素
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.video_top {
  position: absolute;
  top: -46px;
  left: 0;
  width: 100%;
  height: 46px;
  background: #181a1f;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .text {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
  .close {
    font-size: 26px;
    cursor: pointer;
  }
}
.model {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .myVideo {
    width: 450px;
    height: 90%;
    max-height: 860px;
    background: #181a1f;
    position: absolute;
    top: 50%;
    margin-top: 23px;
    left: 50%;
    transform: translate(-50%, -50%);
    .speed_select {
      width: 80px;
      background-color: #34373d;
      margin: 0 12px;
      border-radius: 4px;
      ::v-deep .el-input__inner {
        background-color: #34373d;
        color: #ffffff;
        border-style: none;
      }
    }
  }
  .nextVideo {
    height: 60px;
    padding: 0 20px;
    justify-content: center !important;

    .btn {
      background: #34373d;
      border-radius: 4px;
      color: #ffffff;
      border: none;
      margin: 0 12px;
    }
  }
  #videoPlayer {
    width: 450px;
    height: calc(100% - 60px);
    max-height: 800px;
  }
}
</style>